<template>
  <div class="app-container">
    <el-form :inline="true" :model="params" size="small">
      <el-form-item label="学员姓名">
        <el-input v-model="params.studentName" placeholder="学员姓名" clearable />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="filter.date" type="daterange" align="right" unlink-panels range-separator="至" 
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
        <el-button type="success" icon="el-icon-document-checked" @click="toAccounting">核算业绩</el-button>
      </el-form-item>
      <el-form-item>
        <el-link class="ach">预期业绩：{{ expected }} 元</el-link>
        <el-link type="success" class="ach">已核业绩：{{ achieve }} 元</el-link>
      </el-form-item>
    </el-form>

    <!--列表-->
    <el-table v-loading="loading" :data="data" highlight-current-row fit="fit">
      <el-table-column type="index" label="序号" min-width="55">
        <template slot-scope="scope">
          <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderSn" label="订单号" min-width="160">
        <template slot-scope="scope">
          <router-link :to="`/finance/order/detail/${scope.row.orderSn}`">
            <el-button type="text">{{ scope.row.orderSn }}</el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="merchantStudentName" label="学员姓名" min-width="100" />
      <el-table-column prop="amount" label="订单金额（元）" min-width="110"/>
      <el-table-column prop="contractTypeName" label="签约类型" min-width="80"/>
      <el-table-column prop="opName" label="录单人" min-width="80"/>
      <el-table-column prop="chargeTypeName" label="支付方式" min-width="80"/>
      <el-table-column prop="orderStatusName" label="订单状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus === 1" type="info">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 2" type="warning">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 9" type="warning">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 10" type="danger">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else type="success">{{ scope.row.orderStatusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="chargeTime" label="支付时间" min-width="140">
        <div slot-scope="scope">
          {{ scope.row.chargeTime | formatDate('yyyy-MM-dd hh:mm') }}
        </div>
      </el-table-column>
      <el-table-column prop="auditStatusName" label="审批状态" min-width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.auditStatus === 1" type="warning">{{ scope.row.auditStatusName }}</el-tag>
          <el-tag v-if="scope.row.auditStatus === 10" type="success">{{ scope.row.auditStatusName }}</el-tag>
          <el-tag v-if="scope.row.auditStatus === 11" type="danger">{{ scope.row.auditStatusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="auditOpName" label="审单人"/>
      <el-table-column prop="auditRemark" label="审核备注" min-width="180"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="`/finance/order/detail/${scope.row.orderSn}`">
            <el-button type="text">详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
  </div> 
</template>

<script>
import initData from '@/mixins/initData'
import { accounting } from '@/api/order'

export default {
  mixins: [initData],
  data() {
    return {
      filter: {
        date: []
      },
      loading: false,
      expected: 0,
      achieve: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.params = {
        merchantStudentName: this.query.studentName,
        page: this.page,
        size: this.size
      }
      if (this.filter.date != '' && this.filter.date != null) {
        this.params.date = this.filter.date.join(',')
      }
      this.url = 'merchant/customer/orders'
      return true
    },
    toQuery() {
      this.page = 1
      this.init()
    },
    toAccounting() {
      this.params.merchantStudentName = this.params.studentName
      if (this.filter.date != '' && this.filter.date != null) {
        this.params.date = this.filter.date.join(',')
      }
      accounting(this.params).then(res => {
        this.loading = false
        if (res.data != null) {
          this.expected = res.data.expect
          this.achieve  = res.data.achieve
        }
      }).catch(err => {
        this.loading = false
        this.$notify({
          title: '业绩核算失败',
          message: err.msg,
          type: 'error'
        })
      })
    }
  }
}
</script>

<style>
.ach {
  width: 160px;
}
</style>